<template>
  <div style="margin-top: 10px" class="app-contain">
    <!-- 分栏布局，gutter为每一栏的间隔 -->
    <!-- 布局的一行el-cow分为24份，span就是来确定el-col占了几份 -->
    <!-- el-card为内置的卡片组件 header + body-->
     <el-row :gutter="50">
       <el-col :span="8">
         <el-card>
            <el-form :model="form" ref="form" label-width="15%" :rules="rules">
              <el-form-item  label="学科：" prop="subjectId" style="margin-top: 20px" required>
                <el-select v-model="form.subjectId" placeholder="学科">
                  <el-option v-for="item in subjects" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="错题：" prop="errorQuestionNum" required>
                  <div class="slider-block">
                    <el-slider v-model="form.errorQuestionNum" :step="1" show-stops :max="20"></el-slider>
                  </div>
              </el-form-item>
              <el-form-item label="新题：" prop="newQuestionNum" required>
                  <div class="slider-block">
                    <el-slider v-model="form.newQuestionNum" :step="1" show-stops :max="20"></el-slider>
                  </div>
              </el-form-item>
              <el-form-item label="难度：">
                <el-rate v-model="form.difficult" class="train-item-rate"></el-rate>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">生成试卷</el-button>
              </el-form-item>
            </el-form>
         </el-card>
       </el-col>
       <el-col :span="16">
          <el-card>
            <el-table :data="tableData" v-loading="listLoading" fit highlight-current-row>
              <el-table-column prop="name" label="试卷名称" width="500"></el-table-column>
              <el-table-column prop="subjectName" label="学科" width="100"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="250"></el-table-column>
              <el-table-column width="150">
                <!-- 作用域插槽，就是带有数据的插槽：可以获取父组件传递的参数，将这些参数使用到子组件中 -->
                <!-- 带查询参数examPaperId -->
                <template slot-scope="{row}">
                  <router-link :to="{path:'/do',query:{id:row.id}}">
                    <el-button type="text">开始做题</el-button>
                  </router-link>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :background="false" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
              style="margin-top: 20px" @pagination="search"/>
          </el-card>
       </el-col>
     </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Pagination from '@/components/Pagination'
import examPaperApi from '@/api/examPaper'
export default {
  components: { Pagination },
  data () {
    return {
      form: {
        subjectId: null, // 选择器对应的学科id
        errorQuestionNum: 3, // 需要错题数
        newQuestionNum: 3, // 需要的新题数
        difficult: 0 // 难度
      },
      rules: {
        subjectId: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        errorQuestionNum: [
          { required: true, trigger: 'change' }
        ],
        newQuestionNum: [
          { required: true, trigger: 'change' }
        ]
      },
      queryParam: {
        paperType: 8,
        subjectId: null,
        levelId: null,
        pageSize: 10,
        pageIndex: 1
      },
      total: 10,
      tableData: [], // 智能组卷试卷列表
      listLoading: false // 是否加载
    }
  },
  created () {
    // props - > methods - > data - > computed - > watch的初始化都是在beforeCreated和created之间完成的
    this.initSubject()
    this.search()
  },
  methods: {
    search () {
      this.listLoading = true
      examPaperApi.pageList(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageIndex = re.pageNum
        this.listLoading = false
      })
    },
    submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.listLoading = true
          examPaperApi.insert(this.form).then(data => {
            if (data.code === 1) {
              _this.$message.success(data.message) // element消息提示
              this.search()
            } else {
              _this.$message.error(data.message)
              _this.listLoading = false
            }
          }).catch(e => {
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    ...mapActions('exam', {
      initSubject: 'initSubject'
    })
  },
  computed: {
    ...mapState('exam', {
      subjects: state => state.subjects
    })
  }
}
</script>

<style lang="scss" scoped>
.slider-block {
  margin-right: 20px;
}

.train-item-rate {
  margin-top: 10px;
}
</style>
